<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.num" placeholder="关键字" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="exportSpread">导出</el-button>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" title="导出">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px">
        <el-form-item :label-width="formLabelWidth" label="时间">
          <el-date-picker
            v-model="temp.spreadBeginTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="是否打款款">
          <el-switch
            v-model="temp.spreadStatus"
            active-text="是"
            inactive-text="否"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="exportSpreadHandler">确定</el-button>
      </div>
    </el-dialog>
    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="编号" prop="id" align="center" />
      <el-table-column prop="rdd_user.userNickName" label="邀请人昵称"/>
      <el-table-column prop="rdd_user.userName" label="真实姓名"/>
      <el-table-column prop="spreadCount" label="已邀请人数" align="center" />
      <el-table-column label="邀请费用" prop="spreadSum" align="center" />
      <el-table-column label="收款人" prop="rdd_user.userBankAccount" align="center" />
      <el-table-column label="开户行" prop="rdd_user.userBankName" align="center" />
      <el-table-column label="银行卡号" prop="rdd_user.userBankNumber" align="center" />
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.spreadStatus==1?'已打款':'未打款' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if="scope.row.spreadStatus==0" size="mini" type="success" @click="payHandler(scope.row)">打款</el-button>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import {
	fetchInviteAjax,
	ackStatus
	// exportSpread
} from "@/api/finance";
import { fetchEnterPriseListAjax } from "@/api/enterprise";
import waves from "@/directive/waves"; // Waves directive
// import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
	name: "ComplexTable",
	components: { Pagination },
	directives: { waves },
	filters: {},

	data() {
		return {
			tableKey: 0,
			list: [],
			total: 0,
			tempTotal: 0,
			listLoading: true,
			listQuery: {
				pageNum: 1,
				pageSize: 10
			},
			tempListQuery: {
				pageNum: 1,
				pageSize: 10
			},
			textMap: {
				create: "新增政策",
				update: "更新政策"
			},
			downloadLoading: false,
			dialogFormVisible: false,
			temp: {},
			formLabelWidth: "150px",
			rules: {},
			dialogStatus: "",
			dialogDetailFormVisible: false,
			tempList: [],
			enterpriseOptions: [],
			company: null
		};
	},
	created() {
		this.getList();
		this.getEnterPriseOptions();
	},
	methods: {
		exportSpread() {
			this.temp = {};
			this.dialogFormVisible = true;
			this.$nextTick(() => {
				this.$refs["dataForm"].resetFields();
			});
		},
		exportSpreadHandler() {
			const params = {
				spreadBeginTime: this.temp.spreadBeginTime[0],
				spreadEndTime: this.temp.spreadBeginTime[1],
				spreadStatus: this.temp.spreadStatus
			};
			// exportSpread(params);
			this.dialogFormVisible = false;
			window.open(process.env.BASE_API + '/admin/rddSpread/export?spreadBeginTime=' + params.spreadBeginTime + '&spreadEndTime=' + params.spreadEndTime + '&spreadStatus=' + params.spreadStatus)
		},
		getEnterPriseOptions() {
			try {
				fetchEnterPriseListAjax().then(result => {
					result.data.data.forEach(item => {
						this.enterpriseOptions.push({
							key: item.id,
							value: item.companyName
						});
					});
				});
			} catch (err) {
				console.log(err);
			}
		},
		getList() {
			this.listLoading = true;
			this.listLoading = false;
			this.listLoading = true;
			fetchInviteAjax(this.listQuery).then(response => {
				// if (respons.data.data.) {

				// }
				this.list = response.data.data.pageData;
				this.total = response.data.data.maxCount;
				this.listLoading = false;
			});
		},

		handleFilter() {
			this.listQuery.page = 1;
			this.getList();
		},
		payHandler(data) {
			this.$confirm('确认已打款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
					ackStatus(data).then(response => {
						this.$message({
							type: 'success',
							message: '确认成功!'
						});
						this.getList();
					});
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
		}
	}
};
</script>
